<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .two {
            width: 100px;
            height: 100px;
            margin-top: 100px;
            margin-left: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <!-- <img src="./ww.svg" alt=""> -->
    <div class="one" draggable="true"></div>

    <div class="two"></div>
    <script>
        // 应用于被拖动的元素的事件
        // dragstart  按下鼠标并开始移动鼠标，开始触发
        // drag在触发dragstart以后随机就会立即触发drag并且在拖动期间触发
        // dragend拖动结束 当鼠标松开时触发该事件
        // 拖动事件 应用于被拖动的元素的事件
        // ondragstart 按下鼠标并开始移动鼠标 开始触发
        // ondrag 在触发dragstart之后立即出发drag 并且拖动期间持续触发
        // ondragend 拖动结束 当鼠标松开时触发

        let one = document.querySelector('.one');
        one.ondragstart = function () {
            console.log('开始拖动');
        }
        // one.ondrag = function () {
        //     console.log('拖动进行中');
        // }
        one.ondragend = function () {
            console.log('拖动结束');
        }

        // 放置事件
        // ondragenter 被鼠标拖动的元素进入该容器触发
        // ondragover 被鼠标拖动的元素离开该容器触发 
        // ondragleave 被鼠标拖动的元素在该容器持续移动触发 
        // ondrop 当拖动过程中进入该容器 松开鼠标时触发
        let two = document.querySelector('.two');
        two.ondragover = function (e) {
            e.preventDefault()
            console.log('进入容器');
        }
        two.ondrop = function () {
            console.log('OK')
        }
        // 默认情况下 元素不能再其他元素中拖拽，放在ondragover中阻止就好了


    </script>
</body>

</html>